<template>
  <div class="nav-box-wrap"  @click.stop="navClick" @mouseover="mouseOverNav" @mouseleave="mouseLeaveNav">
      <router-link :to="navObj.link">
        <div class="nav-item-wrap">
            <div class="nav-item-contain">
                <icon-svg :icon-class="$route.path.indexOf(navObj.link) > -1? navObj.activeIcon : currentIcon" />
                <span class="nav-icon-title ellipsis" v-show="navMenuState" :title="navObj.content">{{navObj.content}}
                  <span class="hot" v-show="navObj.hot"></span>
                </span>
                <div v-show="!navMenuState" class="tooltip tooltip-div">{{navObj.content}}</div>
                <i v-show="!navMenuState" class="tooltip tooltip-i"></i>
            </div>
        </div>
    </router-link>
    <div class="nav-masking"></div>
      <!--masking 用来防止再点击菜单，路由被重置-->
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { CommonModule } from '@/store/modules/common'
interface NavObjData {
  activeIcon: string,
  icon: string
}
@Component
export default class NavItem extends Vue {
    private currentIcon: string = '' // 一级菜单没选中时的icon
    @Prop() private navObj!: NavObjData

    private mouseOverNav () { // 鼠标移上去，换成已选中的多色icon
      this.currentIcon = this.navObj.activeIcon
    }

    private mouseLeaveNav () { // 鼠标离开，再次变更为默认icon
      this.currentIcon = this.navObj.icon
    }

    private closeOrShowUserInfoDiv (type) { // 点击设置的时候，展开或者是隐藏个人信息页
      const pane = document.getElementById('user_info_div')
      if (pane) {
        type === 'close' ? pane.style.display = 'none' : pane.style.display = 'block'
      }
    }

    private navClick () { // 点击一级菜单的时候
      this.closeOrShowUserInfoDiv('close')
    }

    get navMenuState (): boolean { // 获取一级菜单展开或者是收起的状态
      return CommonModule.navMenuState || false
    }

    private beforeMount () {
      this.currentIcon = this.navObj.icon
    }
}
</script>
<style lang="stylus" scoped>
  .nav-box-wrap
    position relative
    margin-top 10px
  .tooltip-i
    position absolute
    margin 0 0 0 4px
    width 2px
    height 1px
    border-width 5px
    border-style solid
    border-color transparent #fff transparent transparent
    left 59px
    z-index 2000
    top 14px
  .tooltip-div
    position absolute
    z-index 50000
    background-color #fff
    padding 6px 10px
    color $fc-gray2
    box-shadow 0px 4px 29px 0px rgba(155, 165, 172, 0.46)
    border-radius 4px
    line-height 30px
    white-space nowrap
    left 75px
    top 0px
  .tooltip
    visibility hidden
  .nav-item-wrap:hover
    .tooltip
       visibility visible
    .nav-icon-title
       color $c-main
       position relative
  .nav-item-wrap
    .nav-item-contain
      line-height 40px
      height 40px
      text-align center
      cursor pointer
      display flex
    .hot
      display inline-block
      width 6px
      height 6px
      position absolute
      background #FC6B5C
      border-radius 50%
      top 10px
    .svg-icon
      margin 0 22px
      height 40px
      font-size 18px
      vertical-align middle
    .nav-icon-title
      display inline-block
      color $fc-gray2
      font-size 14px
      font-weighht 500
  .router-link-active+.nav-masking
      position absolute
      left 0
      top 0
      width 100%
      height 100%
  .router-link-active
    .nav-item-wrap
      &:after
         content ''
         display block
         width 20px
         height 70px
         pointer-events none
         background #fff
         position absolute
         right -7px
         bottom -15px
      .nav-item-contain
        background-color #fff
        box-shadow inset 0px 0px 2px 1px rgba(220,232,241,0.7), 0px 0px 2px 1px rgba(220,232,241,0.7)
        &:before, &:after
         content ''
         display block
         position absolute
         width 17px
         height 17px
         border-radius 0 0 100% 0
         top -18px
         right -2px
         z-index 10
         background $bgc-gray
         pointer-events none
         box-shadow 2px 2px 2px rgba(220,232,241,0.7)
        &:after
          right -2px
          display block
          border-radius 0 100% 0 0
          top 42px
          box-shadow 2px -2px 2px rgba(220,232,241,0.7)
      .nav-icon-title
        color $c-main
  .nav.navMenuState
    .nav-item-wrap
      padding 0 0 0 12px
      .svg-icon
        margin 0 12px 0 10px
        font-size 16px
    .router-link-active
      .nav-item-contain
         border-radius 18px 0 0 18px
</style>
